<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>栅格系统与后台布局</title>
	<link rel="stylesheet" href="../libs/layui/layui-2.9.14/dist/css/layui.css">
	<script src="../libs/layui/layui-2.9.14/dist/layui.js"></script>

</head>

<body style="margin:10px ;">

<!-- 
	????? 不知为何，无法生效？？？？
	栅格布局规则：

1. 采用 layui-row 来定义行，如：<div class="layui-row"></div>  
2. 采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中： 
	•变量md 代表的是不同屏幕下的标记（可选值见下文）
	•变量* 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12
	•如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。
3. 列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。 
4. 可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。 
5. 最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！ 

 -->
 <div>
	<div class="layui-row">
		<div class="layui-col-md4">
		  4/12
		</div>
		<div class="layui-col-md4 layui-col-md-offset4">
		  偏移4列，从而在最右
		</div>
	  </div>
 </div>



 <div class="layui-row layui-col-space5">
	<div class="layui-col-md5">
	  <div class="layui-row grid-demo">
		<div class="layui-col-md3">
		  内部列
		</div>
		<div class="layui-col-md9">
		  内部列
		</div>
		<div class="layui-col-md12">
		  内部列
		</div>
	  </div>
	</div>
	<div class="layui-col-md7">
	  <div class="layui-row grid-demo grid-demo-bg1">
		<div class="layui-col-md12">
		  内部列
		</div>
		<div class="layui-col-md9">
		  内部列
		</div>
		<div class="layui-col-md3">
		  内部列
		</div>
	  </div>
	</div>
  </div>

 <div class="layui-container">  
	常规布局（以中型屏幕桌面为例）：
	<div class="layui-row">
	  <div class="layui-col-md9">
		你的内容 9/12
	  </div>
	  <div class="layui-col-md3">
		你的内容 3/12
	  </div>
	</div>
	 
	移动设备、平板、桌面端的不同表现：
	<div class="layui-row">
	  <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
		移动：6/12 | 平板：6/12 | 桌面：4/12
	  </div>
	  <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
		移动：6/12 | 平板：6/12 | 桌面：4/12
	  </div>
	  <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
		移动：4/12 | 平板：12/12 | 桌面：4/12
	  </div>
	  <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
		移动：4/12 | 平板：7/12 | 桌面：8/12
	  </div>
	  <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
		移动：4/12 | 平板：5/12 | 桌面：4/12
	  </div>
	</div>
  </div>
  <script>
  //JS 
  layui.use(['element', 'layer', 'util'], function(){
	var element = layui.element
	,layer = layui.layer
	,util = layui.util
	,$ = layui.$;
	  //使用 layer
	  layer.msg('test');
	
  });
  </script>
  

</body>

</html>